/* ============================================================
   14-badges.css
   Thematisch aufgeteilt aus default.css + SiTTsBlazor.css
   ============================================================ */

/* ---- aus default.css ---- */

.avatar img {
    border-radius: 100%;
    width: 30px;
    height: auto;
}

.avatar.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: .65rem;
}

.avatar.avatar-rounded {
    border-radius: 50%;
}

.badger {
    padding: .25rem .45rem;
    font-weight: 600;
    border-radius: .25rem;
}

    .av-badge.info,
    .mud-chip.info,
    .badger.info {
        background-color: rgba(3,182,245,0.1) !important;
        color: rgb(3,182,245) !important;
    }
    .mud-chip-outlined.info {
        border-color: rgb(3,182,245)
    }

    .av-badge.success,
    .mud-chip.success,
    .badger.success {
        background-color: rgba(38,191,148,0.1) !important;
        color: rgb(38,191,148) !important;
    }
    .mud-chip-outlined.success {
        border-color: rgb(38,191,148);
    }

    .av-badge.danger,
    .mud-chip.danger,
    .badger.danger {
        background-color: rgba(230,83,60,0.1) !important;
        color: rgb(230,83,60) !important;
    }
    .mud-chip-outlined.danger {
        border-color: rgb(230,83,60);
    }

    .av-badge.orange,
    .mud-chip.orange,
    .badger.orange {
        background-color: rgba(255,165,5,0.1) !important;
        color: rgb(255,165,5) !important;
    }
    .mud-chip-outlined.orange {
        border-color: rgb(255,165,5);
}

    .av-badge.pink,
    .mud-chip.pink,
    .badger.pink {
        background-color: rgba(231,145,188,0.1) !important;
        color: rgb(231,145,188) !important;
    }
    .mud-chip-outlined.pink {
        border-color: rgb(231,145,188);
    }

    .av-badge.teal,
    .mud-chip.teal,
    .badger.teal {
        background-color: rgba(18,194,194,0.1) !important;
        color: rgb(18,194,194) !important;
    }
    .mud-chip-outlined.teal {
        border-color: rgb(18,194,194);
    }

    .av-badge.purple,
    .mud-chip.purple,
    .badger.purple {
        background-color: rgba(137,32,173,0.1) !important;
        color: rgb(137,32,173) !important;
    }
    .mud-chip-outlined.purple {
        border-color: rgb(137,32,173);
    }

    .av-badge.primary,
    .mud-chip.primary,
    .badger.primary {
        background-color: rgba(13,110,253,0.1) !important;
        color: rgb(13,110,253) !important;
    }
    .mud-chip-outlined.primary {
        border-color: rgb(13,110,253);
    }

    .av-badge.secondary,
    .mud-chip.secondary,
    .badger.secondary {
        background-color: rgba(108,117,125,0.1) !important;
        color: rgb(108,117,125) !important;
    }
    .mud-chip-outlined.secondary {
        border-color: rgb(108,117,125);
}

    .av-badge.warning,
    .mud-chip.warning,
    .badger.warning {
        background-color: rgba(245,184,73,0.1) !important;
        color: rgb(245,184,73) !important;
    }
    .mud-chip-outlined.warning {
        border-color: rgb(245,184,73);
    }
/* Für den Buchstaben A */
.badge-a {
    background-color: rgba(255, 87, 51, 0.1) !important; /* Rot-Orange */
    color: rgb(255, 87, 51) !important;
}

/* Für den Buchstaben B */
.badge-b {
    background-color: rgba(34, 179, 58, 0.1) !important; /* Dunkleres Grün */
    color: rgb(34, 179, 58) !important;
}

/* Für den Buchstaben C */
.badge-c {
    background-color: rgba(51, 87, 255, 0.1) !important; /* Blau */
    color: rgb(51, 87, 255) !important;
}

/* Für den Buchstaben D */
.badge-d {
    background-color: rgba(255, 51, 161, 0.1) !important; /* Pink */
    color: rgb(255, 51, 161) !important;
}

/* Für den Buchstaben E */
.badge-e {
    background-color: rgba(61, 153, 20, 0.1) !important; /* Noch dunkleres Grün */
    color: rgb(61, 153, 20) !important; /* Noch dunkleres Grün */
}

/* Für den Buchstaben F */
.badge-f {
    background-color: rgba(87, 51, 255, 0.1) !important; /* Indigo */
    color: rgb(87, 51, 255) !important;
}

/* Für den Buchstaben G */
.badge-g {
    background-color: rgba(255, 51, 255, 0.1) !important; /* Magenta */
    color: rgb(255, 51, 255) !important;
}

/* Für den Buchstaben H */
.badge-h {
    background-color: rgba(34, 179, 172, 0.1) !important; /* Dunkleres Aqua */
    color: rgb(34, 179, 172) !important;
}

/* Für den Buchstaben I */
.badge-i {
    background-color: rgba(255, 140, 51, 0.1) !important; /* Helles Orange */
    color: rgb(255, 140, 51) !important;
}

/* Für den Buchstaben J */
.badge-j {
    background-color: rgba(51, 140, 255, 0.1) !important; /* Hellblau */
    color: rgb(51, 140, 255) !important;
}

/* Für den Buchstaben K */
.badge-k {
    background-color: rgba(255, 195, 0, 0.1) !important; /* Goldgelb */
    color: rgb(255, 195, 0) !important;
}

/* Für den Buchstaben L */
.badge-l {
    background-color: rgba(0, 128, 128, 0.1) !important; /* Dunkles Türkis */
    color: rgb(0, 128, 128) !important;
}

/* Für den Buchstaben M */
.badge-m {
    background-color: rgba(140, 51, 255, 0.1) !important; /* Violett */
    color: rgb(140, 51, 255) !important;
}

/* Für den Buchstaben N */
.badge-n {
    background-color: rgba(255, 51, 51, 0.1) !important; /* Leuchtend Rot */
    color: rgb(255, 51, 51) !important;
}

/* Für den Buchstaben O */
.badge-o {
    background-color: rgba(51, 255, 140, 0.1) !important; /* Grün */
    color: rgb(51, 255, 140) !important;
}

/* Für den Buchstaben P */
.badge-p {
    background-color: rgba(255, 51, 133, 0.1) !important; /* Hellrot */
    color: rgb(255, 51, 133) !important;
}

/* Für den Buchstaben Q */
.badge-q {
    background-color: rgba(255, 153, 51, 0.1) !important; /* Neonorange */
    color: rgb(255, 153, 51) !important;
}

/* Für den Buchstaben R */
.badge-r {
    background-color: rgba(139, 0, 139, 0.1) !important; /* Dunkles Rotviolett */
    color: rgb(139, 0, 139) !important;
}

/* Für den Buchstaben S */
.badge-s {
    background-color: rgba(255, 51, 246, 0.1) !important; /* Leuchtend Pink */
    color: rgb(255, 51, 246) !important;
}

/* Für den Buchstaben T */
.badge-t {
    background-color: rgba(51, 140, 140, 0.1) !important; /* Teal */
    color: rgb(51, 140, 140) !important;
}

/* Für den Buchstaben U */
.badge-u {
    background-color: rgba(255, 51, 140, 0.1) !important; /* Rosa */
    color: rgb(255, 51, 140) !important;
}

/* Für den Buchstaben V */
.badge-v {
    background-color: rgba(0, 128, 128, 0.1) !important; /* Dunkles Blaugrün */
    color: rgb(0, 128, 128) !important;
}

/* Für den Buchstaben W */
.badge-w {
    background-color: rgba(140, 255, 51, 0.1) !important; /* Limette */
    color: rgb(140, 255, 51) !important;
}

/* Für den Buchstaben X */
.badge-x {
    background-color: rgba(255, 51, 191, 0.1) !important; /* Pink */
    color: rgb(255, 51, 191) !important;
}

/* Für den Buchstaben Y */
.badge-y {
    background-color: rgba(51, 255, 165, 0.1) !important; /* Türkisgrün */
    color: rgb(51, 255, 165) !important;
}

/* Für den Buchstaben Z */
.badge-z {
    background-color: rgba(255, 87, 51, 0.1) !important; /* Dunkelrot */
    color: rgb(255, 87, 51) !important;
}

/* Für den Buchstaben Ä */
.badge-ä {
    background-color: rgba(191, 255, 51, 0.1) !important; /* Gelbgrün */
    color: rgb(191, 255, 51) !important;
}

/* Für den Buchstaben Ö */
.badge-ö {
    background-color: rgba(51, 165, 255, 0.1) !important; /* Himmelblau */
    color: rgb(51, 165, 255) !important;
}

/* Für den Buchstaben Ü */
.badge-ü {
    background-color: rgba(255, 51, 195, 0.1) !important; /* Leuchtend Rosa */
    color: rgb(255, 51, 195) !important;
}

/* Für das ß */
.badge-ssz {
    background-color: rgba(51, 255, 220, 0.1) !important; /* Aquamarin */
    color: rgb(51, 255, 220) !important;
}
/*.av-inliner {
display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
}*/
.keyword {
    display: flex;
    background-color: rgba(255, 87, 51, 0.1) !important; /* Dunkelrot */
    color: rgb(255, 87, 51) !important;
    padding: .25rem .45rem;
    font-weight: 600;
    border-radius: .25rem;
    box-sizing: border-box;
    margin-right: 5px;
}

    .keyword .keyword-ico {
        margin-left: 5px;
        cursor: pointer;
    }

        .keyword .keyword-ico:hover {
            color: #e306136e !important;
        }

.keyword-content {
    margin: 0.5rem;
    display: flex;
}

.av {
    position: relative;
    height: 2.625rem;
    width: 2.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    color: #fff;
    font-weight: 500;
    margin-right: 5px;
}









    .av.av-badge {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
        border-radius: 50%;
    }

.badge-padder {
    display: flex;
    align-items: center;
}

    .badge-padder .b-row {
        padding-top: 0;
        padding-bottom: 0;
    }

.badge_custom {
    padding: .15rem .35rem;
    font-weight: bold;
    border-radius: .25rem;
    background-color: rgba(35,183,229,0.2);
    color: rgba(35,183,229,1);
    margin-left: .5rem !important;
    box-sizing: border-box;
    font-size: .65rem;
    text-align: center;
}